<template>
  <div class="repayment">

    <div class="tab_nav_bg" >
      <div  class="flex_center">
        <van-icon name="arrow-left" class="nav_left_icon" @click="$router.go(-1)"  size="18px"/>
        <div style="flex: 1;text-align: center">{{$t('还款详情')}}</div>
      </div>
    </div>
    <div class="wrapper">
      <div class="card" style="margin-bottom: 20px">
        <div style="padding: 15px 0;font-size: 20px">Amounts payable</div>
        <div class="card_amount">
          ₱{{ details.notTotal }}
        </div>
        <p style="color: #999999;font-size: 18px">Expiration date {{ formatDate(details.lastRepaymentDay) }}</p>
      </div>
      <div class="card">
        <div style="padding: 15px 0;font-size: 20px">Repayment</div>
        <div class="bank_item"   v-for="item in repaymentTypeList" :key="item.id">
          <div>
            <img  class="bank_logo" :src="item.logoUrl">
            <span style="vertical-align: middle">{{ item.channelName }} <span>{{item.channelType}}</span></span>
          </div>
          <div @click="payChannelKey =  item.id">
            <van-checkbox  v-if="payChannelKey === item.id" :model-value="true"></van-checkbox>
            <van-checkbox  v-else :model-value="false"></van-checkbox>
          </div>
        </div>
      </div>
    </div>
    <div class="pay_button">
      <van-button style="width: 100%;" round type="primary"  @click="visibleConfirm()">repayment
      </van-button>
    </div>
  </div>
</template>

<script>
import router from '@/router/index'
import {repaymentDetails, virtualCardByRegister, fetchRepaymentType, fetchExtendDay} from '@/api/order'
import {onMounted, ref} from "vue";
import {Dialog, Toast} from "vant";
import {useStore} from "vuex";
import {formatDate_EN, formatMoney} from "@/utils/tool";
import {useI18n} from "vue-i18n"

export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  setup() {
    const {loanRecordId, type} = router.currentRoute.value.query
    const visibleShow = ref(false)
    const store = useStore()
    const {t} = useI18n()
    const details = ref({})
    const repaymentTypeList = ref([])
    const payChannelKey = ref(null)
    const fetchRepaymentDetails = async () => {
      if (type === 'repay') {
        const res = await repaymentDetails({
          loanRecordId
        })
        if (res.code === 1) {
          details.value = res.data || {}
        }
      } else if (type === 'extend') {
        const res = await fetchExtendDay({loanRecordId})
        if (res.code === 1) {
          const data = res.data[0]
          details.value = {
            notTotal: data.totalAmount,
            lastRepaymentDay: data.rollRefundDate,
            rollOverDay: data.rollOverDay
          }
        }
      }
      // 清除loading
      store.dispatch('changeLoading', false)
    }
    const visibleConfirm = async () => {
      Toast.loading({
        message: t('加载中'),
        forbidClick: true,
        duration: 0
      });
      const channel = repaymentTypeList.value.find(v => v.id === payChannelKey.value)
      const params = {
        payType: type === 'repay' ? 1 : 2,
        channelName: channel.channelCode,
        payAmount: details.value.notTotal,
        channelType:channel.channelType,
        loanRecordId,
      }
      if (type === 'extend') {
        params.rollDay = details.value.rollOverDay || null
      }
      const res = await virtualCardByRegister(params)
      if (res.code === 1) {
        const query = {
          loanRecordId,
          payChannel: channel.channelCode,
          channelType: channel.channelType,
          amount: details.value.notTotal,
          payType:type === 'repay' ? 1 : 2,
        }
        if (channel.channelType === 'QR-PH') {
          router.push({
            path: '/EJqsxkAFndw', query
          })
        } else if (channel.channelType === 'billspayment') {
          router.push({
            path: '/TGxcJYBvaFO', query
          })
        }
        Toast.clear();
      }
    }
    // 格式化金额
    const formatterMoney = (value) => {
      if (value) {
        return formatMoney(value)
      } else {
        return value
      }
    }

    function formatDate(value) {
      if (!value) return ''
      return formatDate_EN(new Date(value))
    }

    async function getRepayment() {
      const res = await fetchRepaymentType({
        productName: localStorage.getItem('productName')
      })
      if (res.code === 1) {
        repaymentTypeList.value = res.data
        if (repaymentTypeList.value.length > 0) {
          const content = res.data[0]
          payChannelKey.value = content.id
        }
      }
    }

    onMounted(() => {
      getRepayment()
      fetchRepaymentDetails()
    })
    return {
      payChannelKey,
      visibleShow,
      details,
      visibleConfirm,
      formatterMoney,
      repaymentTypeList,
      formatDate
    }
  }
}
</script>

<style scoped lang="less">
.repayment {
  position: relative;
  overflow: auto;

  .wrapper {
    position: relative;
    padding: 15px;
    margin-top: -150px;
    .card {
      box-sizing: border-box;
      padding: 15px;
      background-color: #FFFFFF;
      border-radius: 10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      .repay_check_icon{
        height: 40px;
        width: 40px;
      }
      .bank_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        font-size: 16px;
      }

      .bank_logo {
        height: 36px;
        width: 40px;
        margin-right: 10px;
        vertical-align: middle;
      }

      .check {
        height: 30px;
        width: 30px;
      }
      .card_amount {
        color: #E79A00;
        border-radius: 6px;
        margin: 0 auto;
        font-size: 40px;
        padding: 10px 0;
      }

      .card_item {
        padding: 8px 15px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
      }
    }

    .repayment_card {
      margin-top: 20px;
      background-color: #FFEEE5;
      font-size: 16px;
      padding: 10px 10px;
      border-radius: 10px;
      box-sizing: border-box;
      .repay_check_icon{
        height: 40px;
        width: 40px;
      }
      .bank_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
      }

      .bank_logo {
        height: 36px;
        width: 40px;
        margin-right: 10px;
        vertical-align: middle;
      }

      .check {
        height: 30px;
        width: 30px;
      }
    }
  }

  .pay_button {
    position: fixed;
    bottom: 30px;
    width: 100%;
    box-sizing: border-box;
    padding:25px;
    text-align: center;
  }
}

</style>
